<template>
	<view class="wrap">
		<view class="scroll-view">
			<view class="content-wrap">
				<image :src="$wanlshop.oss(goodsData.image,750,1000)" mode="widthFix" class="topImg"></image>
				<image src="../../static/imgs/detail/daojishi.png" mode="widthFix" class="countdown">
					<text class="timeclass">{{timeDate}}</text>
				</image>
				<view class="header">
					<view class="price-row">
						<view class="price-wrap">
							<view class="price">
								¥<view style="font-size: 45rpx;">{{ goodsData.market_price }}</view>
							</view>
							<view class="price-after">
								现价¥<view class="" style="font-size: 45rpx;">
									{{ goodsData.interval_price }}
								</view>
							</view>
						</view>
						<view class="price-salesNum">
							<image src="../../static/imgs/detail/yanjing.png" mode="" class="yanjingimg"></image>
							{{goodsData.views}}
						</view>
						<view class="salesNum">
							已售{{ goodsData.sales }}
						</view>
					</view>
					<view class="title-wrap">
						<view class="title">
							<view class="hot-wrap">
								<view class="hot good">
									<image src="../../static/imgs/detail/good.png" mode=""></image>
									<view class="z-1">
										精选
									</view>
								</view>
								<view class="hot">
									<image src="../../static/imgs/detail/hot.png" mode=""></image>
									<view class="z-1">
										热卖
									</view>
								</view>
							</view>

							{{ goodsData.title }}
						</view>
						<view class="share">
							<image src="@/static/imgs/detail/share.png" mode=""></image>
						</view>

					</view>
					<view class="info-wrap">
						<view class="shield-wrap">
							<view class="shield-text">
								保障
							</view>
							<image src="../../static/imgs/detail/shield.png" mode="" class="shield-icon"></image>
							<view class="shield-content">
								<!--								极速售后 · 全国部分包邮 · 七天无理由退换-->
								<block v-for="(item, index) in goodsData.shop.service_ids" :key="item.id"
									v-if="index <= 2">
									<text class="margin-lr-xs" v-if="index != 0">·</text>
									{{ item.name }}
								</block>
							</view>
						</view>
						<image src="@/static/imgs/detail/arrow-right.png" mode="" class="arrow-right"></image>
					</view>
				</view>
				<view class="order" @tap="scrollInTo">
					超值特惠，立即下单
				</view>
				<view class="evaluate-wrap">
					<view class="evaluate-title">
						<view class="evaluate-title-num">
							评价({{ goodsData.comment }})
						</view>
						<view class="more">
							查看更多
							<image src="@/static/imgs/detail/more.png" mode="" class="more-icon"></image>
						</view>

					</view>
					<view class="evaluate-list">
						<view class="evaluate-item" v-for="(item,index) in goodsData.comment_list.data" :key="item.id">
							<view class="evaluate-item-avatar">
								<image :src="$wanlshop.oss(item.user.avatar, 26, 26, 2, 'avatar')" mode=""></image>
								{{ item.user.nickname }}
							</view>
							<view class="evaluate-item-content">
								{{ item.content }}
							</view>
						</view>

					</view>
				</view>

				<view class="shop-wrap">
					<image :src="$wanlshop.oss(goodsData.shop.avatar)" mode="" class="shop-avatar"></image>
					<view class="shop-content">
						<view class="shop-content-name">
							{{ goodsData.shop.shopname }}
						</view>
						<image src="@/static/imgs/detail/authentication.png" mode="" class="authentication"></image>
					</view>
					<view class="toShop">
						进店逛逛
					</view>
				</view>
				<view class="detail-imgs">
					<!--          <input type="text" :value="resData">-->
					<!--					<image src="https://cdn.zzh222.cn/1010/WechatIMG1236.jpg" mode="widthFix" v-for="item in 2"></image>-->
					<rich-text :nodes="goodsData.content"></rich-text>
				</view>

				<view class="detail-wrap" id="detail">
					<view class="detail-header">
						<image @click="preview"
							:src="$wanlshop.oss(selectshop.thumbnail ? selectshop.thumbnail : goodsData.image)" mode=""
							class="shop-img"></image>


						<view class="detail-header-content">
							<view class="detail-header-title">
								<view class="brand-wrap">
									<view class="brand">
										品牌
									</view>
									{{ goodsData.title }}
								</view>
								<view class="tabs-wrap">
									<view class="tabs-item">
										部分包邮
									</view>
								</view>
								<view class="detail-header-price-wrap">
									<view class="price-tip">
										到手价
									</view>
									<view class="detail-header-price">
										¥<view class="">
											{{ selectshop.price || goodsData.interval_price }}
										</view>
									</view>
								</view>
							</view>

						</view>
					</view>
					<view class="specifications-wrap">
						<view class="specifications-content">
							<!-- <view class="specifications-title">
								{{ goodsData.title }}
							</view> -->
							<view class="specifications-list">
								<view class="opt text-left padding-bj solid-bottom"
									v-for="(value, spukey) in goodsData.spu" :key="value.id">
									<view class="text-df">{{ value.name }}</view>
									<view class="tag specifications-list">
										<view class="cu-tag text-sm" style="margin-top: 2vw"
											v-for="(item, index) in value.item" :key="index"
											:class="[item.ishow ? '' : 'noactive', subIndex[spukey] == index ? 'specifications-item-ac' : '']"
											@tap="skuClick(item, spukey, $event, index)">
											{{ $base64.decode(item.name) }}
										</view>
									</view>
								</view>

							</view>
						</view>

					</view>
					<view class="num-wrap">
						<view class="num-content">


							<view class="num-text">
								购买数量
							</view>
							<view class="num-action">

								<uni-number-box :min="1" :max="selectshop.stock" :value="selectNum" :disabled="canCount"
									@change="changeNum"></uni-number-box>
							</view>
						</view>
					</view>

					<view class="address-wrap">
						<view class="address-title">
							<view class="">
								收货地址
							</view>
							<!-- <view class="wx">
								<image src="@/static/imgs/detail/wx.png" mode="" class="wx-icon"></image>
																微信地址导入
								<image src="../../static/imgs/detail/arrow-right.png" mode="" class="arrow"></image>
							</view> -->
						</view>
						<view class="address-item">
							<view class="address-name">
								收货人
							</view>
							<view class="address-content">

								<input type="text" placeholder="请输入收货人姓名" class="address-input"
									placeholder-class="placeholderClass" v-model="addressData.name" />
							</view>
						</view>
						<view class="address-item">
							<view class="address-name">
								手机号码
							</view>
							<view class="address-content">
								<input type="number" placeholder="请输入11位手机号" maxlength="11" class="address-input"
									placeholder-class="placeholderClass" v-model="addressData.mobile" />
							</view>
						</view>
						<view class="address-item">
							<view class="address-name">
								所在地区
							</view>
							<view class="address-content" @tap="btnClick">
								{{addressData.formatted_address?addressData.formatted_address:'请选择省市区'}}
							</view>
							<u-picker ref="addressRef" :show="addressPicker" :columns="newaddress" keyName="name"
								@confirm="newConfirm" @close="newCancel" @cancel="newCancel"
								@change="pickerChange"></u-picker>
						</view>

						<view class="address-item">
							<view class="address-name">
								详细地址
							</view>
							<view class="address-content">

								<input type="text" maxlength="-1" @input="getInputtips" @focus="focusInputtips"
									@confirm="confirmInputtips" @blur="blurInputtips"
									:placeholder-style="addressData.adcode==''?'color: #bbb':''"
									v-model="addressData.address_full" :disabled="addressData.adcode==''?true:false"
									:placeholder="addressData.adcode==''?'还没有选择地区哦~ 选择地区后完成此项':'支持智能联想，输入小区名试试~'"
									class="address-input" placeholder-class="placeholderClass" :cursor-spacing="170" />
							</view>

						</view>
						<scroll-view scroll-y="true" class="tipsScroll" v-show="!addressType">
							<view class="item" v-for="(item,index) in addressList.tips" :key="index"
								@tap="addressTisp(item)">
								<view>{{item.address}}</view>
								<text>{{item.name}}</text>
							</view>
						</scroll-view>
						<!-- <wanl-address :class="wanlAddress_show ? 'wanlAddress_box':''" class="wanlAddress"
							ref='wanlAddress' @selectAddress="successSelectAddress"
							@hiddenAddress="hiddenAddress"></wanl-address> -->
					</view>

					<view class="pay-wrap">
						<view class="pay-name">
							<image src="../../static/imgs/detail/wx_1.png" mode=""></image>
							微信支付
						</view>
						<image class="check" src="@/static/imgs/detail/check.png" mode=""></image>
					</view>

					<view class="payInfo-wrap">
						<view class="payInfo-item">
							<view class="payInfo-name">
								商品金额
							</view>
							<view class="payInfo-content">
								¥{{ Number(selectshop.price) * Number(selectNum) }}
							</view>
						</view>
						<view class="payInfo-item">
							<view class="payInfo-name">
								运费
							</view>
							<view class="payInfo-content">
								{{ goodsData.freight.name }}
								{{ goodsData.freight.price !== 0 ? "(" + goodsData.freight.price + ")":'' }}
							</view>
						</view>
						<view class="payInfo-item">
							<view class="payInfo-name">
								应付金额
							</view>
							<view class="payInfo-content">
								¥{{ (Number(selectshop.price) * Number(selectNum)) + Number(goodsData.freight.price) }}
							</view>
						</view>
					</view>

					<view class="remark-wrap">
						<view class="remark-name">
							留言
						</view>
						<view class="remark-content">
							<input type="text" placeholder="给商家留言" placeholder-class="placeholderClass"
								v-model="remarks" class="remark-input">
						</view>
					</view>

					<view class="project-wrap">
						<view class="project-content">
							<view class="project-name">
								<image src="../../static/imgs/detail/shield-suc.png" mode=""></image>
								购物保障
							</view>
							<view class="project-in">
								保护中
								<image src="../../static/imgs/detail/in.png" mode=""></image>
							</view>
						</view>
						<view class="project-des">
							保障您的个人隐私信息安全，您的信息仅用于为您提供服务或改善服务体验，勾选即同意<text>《个人信息说明》</text>
						</view>
					</view>

					<view class="submit" @click="NewSubmitData" id="sudetail">
						提交订单
					</view>

					<view class="footer">
						商家：{{ goodsData.shop.shopname }}｜友邻科技仅提供技术支持
					</view>
				</view>
			</view>
		</view>
		<view class="first-wrap" v-if="flag">
			<image src="../../static/imgs/detail/first.png" mode="" class="bg"></image>
			<view class="first-content z-1" @click="scrollInTo">
				<image src="../../static/imgs/detail/first-icon.png" mode=""></image>
				点我下单，优先发货
			</view>
		</view>
		<view class="customer" @click="oncustomer ">
			<image src="@/static/imgs/detail/kefutupian.png" class="Imageservice"></image>
		</view>
		<view class="video-wrap" v-if="videoFlag">
			<video src="" class="video"></video>
			<view class="video-name">
				商品讲解
			</view>
			<image src="@/static/imgs/detail/close.png" mode="" class="close" @click="videoFlag=false"></image>
		</view>

		<List v-if="flag"></List>

		<view class="">
			<u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm"
				@change="changeHandler"></u-picker>
		</view>
		<!-- 预览模态框 -->
		<view v-if="isPreviewOpen" class="preview-modal">
			<view v-if="isPreviewOpen" class="modal-overlay" @click="closePreview"></view>
			<view class="preview-content" @click="closePreview">
				<image :src="previewImage" alt="预览图像" mode="widthFix"></image>
			</view>
		</view>
		<u-popup v-if="payShow" :show="payShow" mode="bottom" @close="payShowClose">
			<new-pay :token="payToken" :payData="payData"></new-pay>
		</u-popup>
	</view>
</template>

<script>
	const app = getApp()
	import List from '@/components/list.vue'
	import newPay from '@/components/new-pay.vue'
	import {
		mapState
	} from 'vuex';
	import AssistancePrice from '@/components/assistance-price.vue'
	import UniNumBox from '@/components/uni-number-box/uni-number-box.vue'
	export default {
		components: {
			List,
			AssistancePrice,
			newPay,
			UniNumBox
		},
		data() {
			return {
				addressPicker: false,
				pickers: [],
				pickerData: [],
				pickerDatas: [],
				payToken: '',
				payData: [],
				payList: [],
				payShow: false,
				newaddress: [],
				newShow: false,
				assPrice: 0.00,
				allPrice: 0.00,
				dealPrice: 0.00,
				assistancePrice: false,
				previewImage: '', // 用于保存预览图像的URL
				isPreviewOpen: false, // 用于控制是否显示预览模态框
				statusBarHeight: app.globalData.statusBarHeight,
				current: 0,
				num: 1,
				show: false,
				region: '',
				columns: [
					['中国', '美国'],
					['深圳', '厦门', '上海', '拉萨']
				],
				columnData: [
					['深圳', '厦门', '上海', '拉萨'],
					['得州', '华盛顿', '纽约', '阿拉斯加']
				],
				scrollIntoView: '',
				detailHeight: 0,
				windowHeight: 0,
				flag: true,
				videoFlag: false,
				navFlag: false,

				//
				TabCur: 0,
				wanlsys: {},
				modalName: null, // 弹出层
				durect: 0, // 角标
				headerOpacity: 0, //不透明度
				currentSwiper: 0, // 轮播图右下角数字
				anchorlist: [{
					name: '主图',
					top: 0
				}, {
					name: '评价',
					top: 0
				}, {
					name: '详情',
					top: 0
				}, {
					name: '推荐',
					top: 0
				}], //导航条锚点
				selectAnchor: 0,
				//产品数据
				goodsData: {
					id: 0,
					category_id: 0,
					shop_id: 0,
					brand_id: 0,
					freight_id: 0,
					title: '',
					image: '',
					images: '',
					flag: '',
					content: '',
					category_attribute: [],
					activity_type: 'goods',
					price: null,
					interval_price: null,
					market_price: null,
					sales: 0,
					brand: {},
					freight: {
						name: '',
						isdelivery: 1
					},
					payment: 0,
					comment: 0,
					praise: 0,
					moderate: 0,
					negative: 0,
					like: 0,
					views: 0,
					status: '',
					category: {},
					follow: true,
					sku: [],
					spu: [],
					promotion: [],
					coupon: [],
					comment_list: {
						data: [],
						figure: 0,
						tag: []
					},
					shop: {
						find_user: {
							fans: 0
						},
						city: ''
					},
					shop_recommend: {},
					investment_cost: ""
				},
				// 猜你喜欢
				reload: true,

				likeData: [],
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'loading',
				contentText: {
					contentdown: ' ',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				// 商品规格组合
				shopItemInfo: {}, //存放要和选中的值进行匹配的数据
				selectArr: [], //存放被选中的值
				subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
				selectshop: {}, //存放最后选中的商品
				selectNum: 1, //选中数量
				isChoice: '', // 是否从选择进入
				scrollAnimation: 100, //分享滚动

				// 地址设置
				addressData: {
					name: '',
					mobile: '',
					default: 0,
					//地区
					country: '', // 国家
					province: '', //省份
					city: '', // 城市
					citycode: '', // 城市代码
					district: '', // 县
					adcode: '', // 地区代码
					formatted_address: '', //详细地区
					//详情
					address: '', //详细地址
					address_name: '', // 地址名称
					address_full: '', // 完整地址名称
					location: '' //经纬度
				},
				addressList: {
					location: '',
					adcode: '',
					tips: {}
				},
				addressType: true,
				wanlAddress_show: false,

				remarks: '',
				dianwo: true,
				address_id: 0,
				token: '',
				orderData: {},

				time: null,
				resData: {},
				resOption: {},
				
				timeDate: 0,
				timeDateslot: null,
				
				endTime: 0,
				currentTime:0,
			};
		},
		computed: {
			canCount() {
				return this.subIndex.some(item => item === -1);
			},
			...mapState(['cart', 'common'])
		},
		created() {
			this.getNewAddress()
		},
		onLoad(option) {
			console.log(option)
			var self = this;
			uni.getSystemInfo({
				success: function(res) {
					self.windowHeight = res.windowHeight
					console.log(res)
				}
			});
			// this.time = setInterval(()=>{
			// 	this.regularTime();
			// },500)
			this.wanlsys = this.$wanlshop.wanlsys();
			this.resData = window.location.href
			var resop = this.resData.split("#")
			if (resop[0] && resop[0].indexOf('?') != -1) {
				var ddd = this.getUrlParam(resop[0])
				console.log("+++++++++++++++++++++++++")
				console.log(ddd)
				option = {
					...option,
					...ddd
				}
				console.log(option)
				console.log("+++++++++++++++++++++++++")

				// if (JSON.stringify(option) === "{}"){
				//   var cili = this.getUrlParam(this.resData)
				//   option = {
				//     ...option,
				//     ...cili
				//   }
				// }
			}

			var url = this.getUrlParam(this.resData)
			if (url.callback) {
				window.location.href = `/h5/#/?id=${url.id}&event_type=${url.event_type}&cili=${url.callback}`;
			}

			// if (option.callback){
			//   uni.navigateTo({
			//     url: `/pages/product/detail?id=${option.id}&event_type=${option.event_type}&cili=${option.callback}`
			//   });
			// }



			// this.resOption = JSON.stringify(option.clickid)
			// 巨量
			if (option.clickid) {
				uni.setStorageSync('clickid', option.clickid);
			}
			// 腾讯回调
			if (option.qz_gdt) {
				uni.setStorageSync('qz_gdt', option.qz_gdt);
			}
			// 腾讯回调
			if (option.host) {
				uni.setStorageSync('host', option.host);
			}
			// 变现猫
			if (option.bxm_id) {
				uni.setStorageSync('bxmid', option.bxm_id);
			}
			// 变现猫
			if (option.bxmid) {
				uni.setStorageSync('bxmid', option.bxmid);
			}
			// 磁力
			if (option.cili) {
				uni.setStorageSync('cili', option.cili);
			} // 磁力
			// if (option.callback) {
			//   uni.setStorageSync('cili', option.callback);
			// }
			// 通用
			if (option.event_type) {
				uni.setStorageSync('event_type', option.event_type);
			}
			this.loadData(option);
			this.assistancePrice = option.assistancePrice;

			if (uni.getStorageSync('oid')) {
				this.time = setInterval(() => {
					this.regularTime();
				}, 800)
			}
			this.starCout();
		},
		onPageScroll(e) {
			console.log(e)
			this.flag = e.scrollTop < this.detailHeight - this.windowHeight
			this.navFlag = e.scrollTop > this.statusBarHeight
		},
		mounted() {
			console.log(this.goodsData, 231321321321);
			console.log(this.selectshop, 98989898989898);
		},
		destroyed() {
			clearInterval(this.time);
		},
		methods: {
			starCout() {
				// 获取当前时间
				this.currentTime = new Date();
				// 设置倒计时结束时间为当前时间加5分钟
				this.endTime = new Date(this.currentTime.getTime() + 5 * 60 * 1000);
				let remainingTime = this.endTime - this.currentTime;
				this.timeDateslot = setInterval(() => {
					if (remainingTime > 0) {
						// remainingTime --;
						remainingTime = remainingTime - 100;
					} else {
						clearInterval(this.timeDateslot);
					}
					var minutes = Math.floor(remainingTime / (60 * 1000));
					var seconds = Math.floor((remainingTime % (60 * 1000)) / 1000);
					var millisecond = Math.floor(remainingTime % 1000 / 10);
					if(seconds.toString().split('').length < 2){
						seconds = "0" + seconds
					}
					if(millisecond.toString().split('').length < 2){
						millisecond = "0" + millisecond
					}
					this.timeDate = minutes + ":" + seconds + ":" + millisecond;
				}, 100)
			},
			getUrlParam(url) {
				var obj = {};
				var data = url.split('?')[1].split('&');
				for (var i = 0; i < data.length; i++) {
					var res = data[i].split('=');
					obj[res[0]] = res[1];
				}
				return obj;
			},
			// 选中时执行
			pickerChange(e) {
				console.log('地址选择器');
				const {
					columnIndex,
					index,
					indexs,
					value,
					values,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.addressRef
				} = e;

				if (columnIndex === 0) { // 选择第一列数据时
					// 设置第二列关联数据
					picker.setColumnValues(1, this.pickerData[index]);
					// 设置第三列关联数据
					picker.setColumnValues(2, this.pickerDatas[index][columnIndex]);
				} else if (columnIndex === 1) { // 选择第二列数据时
					// 设置第三列关联数据
					picker.setColumnValues(2, this.pickerDatas[indexs[0]][index]);
				}
			},
			async getNewAddress() {
				await uni.request({
					url: '/wanlshop/common/area',
					success: (res) => {
						if (res.data.length > 0) {

							let province = []; //初始数据需要展示的省份
							res.data.forEach((item1, index1) => {
								let temp2 = [];
								this.pickers.push({
									'name': item1.name,
									'zip': item1.zip,
									'code': item1.code,
								});
								let temp4 = [];
								let temp3 = [];
								item1.city.forEach((item2, index2) => {
									temp2.push({
										'name': item2.name,
										'zip': item2.zip,
										'code': item2.code,
									});
									// 遍历区
									item2.area.forEach((item3, index3) => {
										temp3.push({
											'name': item3.name,
											'zip': item3.zip,
											'code': item3.code,
										});
									})
									temp4[index2] = temp3;
									temp3 = [];
								})
								this.pickerDatas[index1] = temp4;
								this.pickerData[index1] = temp2;
							})
							this.newaddress.push(this.pickers, this.pickerData[0], this.pickerDatas[0][0]);
							console.log(this.newaddress, 'address');
						} else {
							this.$wanlshop.msg('请稍后，数据正在加载')
						}
					}
				});
			},
			reduce() {
				if (this.num == 1) return
				this.num--
			},
			add() {
				this.num++
			},
			payShowClose() {
				this.payShow = false;
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log('confirm', e)
				this.region = e.value.join('-')
				this.show = false
			},
			page(e) {
				console.log(e)

				this.flag = e.detail.scrollTop < e.detail.scrollHeight - this.detailHeight - this.windowHeight
				this.navFlag = e.detail.scrollTop > this.statusBarHeight
				console.log(this.detailHeight, e.detail.scrollTop)
				// console.log(this.statusBarHeight,e.detail.scrollTop)
				// console.log(this.navFlag)
			},
			//获取支付页的高度
			getDetailHeight() {
				let query = uni.createSelectorQuery();
				query.select('#detail').boundingClientRect(data => {
					this.detailHeight = data.top
					console.log(data)
					// 这个
				}).exec();

			},
			scrollInTo() {
				// console.log(this.detailHeight)
				// this.scrollIntoView = 'detail'
				// setTimeout(() => {
				// 	this.scrollIntoView = 'd'
				// }, 100)
				this.$nextTick(() => {
					uni.pageScrollTo({
						duration: 0,
						scrollTop: this.detailHeight,
					});
				});

			},
			async loadData(option) {
				//加载商品
				await uni.request({
					url: '/wanlshop/product/goods',
					data: option,
					success: res => {
						//详情正则
						res.data.content = res.data.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (
							match, capture) => {
							var img =
								`<img style="display: block; max-width: 100%;" src="${this.$wanlshop.oss(capture, 500, 0)}">`;
							return img;
						});
						// 价格区间
						if (res.data.sku.length == 0) {
							res.data.interval_price = res.data.price;
							res.data.market_price = res.data.price;
						} else {
							let price = [],
								market_price = [];
							for (let value of res.data.sku) {
								price.push(value.price);
								market_price.push(value.market_price);
							}
							let minPrice = Math.min.apply(null, price),
								maxPrice = Math.max.apply(null, price),
								maxMarketPrice = Math.max.apply(null, market_price);
							res.data.interval_price = minPrice == maxPrice ? Number(minPrice).toFixed(2) :
								(minPrice + '-' + Number(maxPrice).toFixed(2)); //区间价格
							res.data.market_price = Number(maxMarketPrice).toFixed(2); //最大市场价
						}
						this.goodsData = res.data;

						// 商品规格组合
						this.goodsData.spu.map(item => {
							// 1.1.3升级
							item.item.map((name, key, arr) => {
								arr[key].name = this.$base64.encode(arr[key].name)
							});
							this.selectArr.push('');
							this.subIndex.push(-1);
						});
						// 1.1.3升级
						this.goodsData.sku.map(item => {
							item.difference.map((name, index, arr) => {
								arr[index] = this.$base64.encode(name)
							});
						});
						this.checkItem(); //计算sku里面规格形成路径
						this.checkInpath(-1); //传-1是为了不跳过循环
						// 计算锚点高度
						// setTimeout(() => {
						//   this.calcAnchor();
						// }, 1000);
						setTimeout(() => {
							this.getDetailHeight()
						}, 1000)
						// 默认选中第一个规格
						if (this.goodsData.spu && this.goodsData.spu[0] && this.goodsData.spu[0].item) {
							this.skuClick(this.goodsData.spu[0].item[0], 0, this.$event, 0)
						}
					}
				});
			},
			async loadStock(sku_id) {
				await uni.request({
					url: '/wanlshop/product/stock',
					data: {
						sku_id: sku_id
					},
					success: res => {
						this.selectshop.stock = res.data;
					}
				});
			},
			// 商品规格组合 选择
			skuClick(value, spukey, event, index) {
				if (value.ishow) {
					if (this.selectArr[spukey] != value.name) {
						this.$set(this.selectArr, spukey, value.name);
						this.$set(this.subIndex, spukey, index);
					} else {
						this.$set(this.selectArr, spukey, '');
						this.$set(this.subIndex, spukey, -1);
					}
					this.checkInpath(spukey);
					//如果全部选完
					if (this.selectArr.every(item => item != '')) {
						this.selectshop = this.shopItemInfo[this.selectArr];
						// 1.1.3升级
						this.selectshop.difference.map((name, index, arr) => {
							arr[index] = this.$base64.decode(name)
						})
						this.loadStock(this.selectshop.id);
						this.selectNum = 1;
					}
				}
			},
			//循环所有属性判断哪些属性可选
			checkInpath(clickIndex) {

				//当前选中的兄弟节点和已选中属性不需要循环
				for (let i = 0, len = this.goodsData.spu.length; i < len; i++) {
					if (i == clickIndex) {
						continue;
					}
					let len2 = this.goodsData.spu[i].item.length;
					for (let j = 0; j < len2; j++) {
						if (this.subIndex[i] != -1 && j == this.subIndex[i]) {
							continue;
						}
						let choosed_copy = [...this.selectArr];
						this.$set(choosed_copy, i, this.goodsData.spu[i].item[j].name);
						let choosed_copy2 = choosed_copy.filter(item => item !== '' && typeof item !== 'undefined');
						if (this.shopItemInfo.hasOwnProperty(choosed_copy2)) {
							this.$set(this.goodsData.spu[i].item[j], 'ishow', true);
						} else {
							this.$set(this.goodsData.spu[i].item[j], 'ishow', false);
						}
					}
				}
				// console.log(this.goodsData.spu)
			},
			//计算有多小种可选路径
			checkItem() {
				let result = this.goodsData.sku.reduce(
					(arrs, items) => {
						return arrs.concat(
							items.difference.reduce(
								(arr, item) => {
									return arr.concat(
										arr.map(item2 => {
											//利用对象属性的唯一性实现二维数组去重
											if (!this.shopItemInfo.hasOwnProperty([...item2, item])) {
												this.shopItemInfo[[...item2, item]] = items;
											}
											return [...item2, item];
										})
									);
								},
								[
									[]
								]
							)
						);
					},
					[
						[]
					]
				);
			},
			//商品规格修改数量
			changeNum(val) {
				if (this.selectshop.stock) {
					let num = parseInt(val);
					if (num > this.selectshop.stock) {
						this.$wanlshop.msg(`数量不能超过库存 ${this.selectshop.stock} 件`);
						this.selectNum = parseInt(this.selectshop.stock);
					} else {
						this.selectNum = parseInt(val);
					}
				}
			},
			newConfirm(e) {
				console.log(e.value, '选择地区');
				this.addressData.formatted_address = e.value[0].name + e.value[1].name + e.value[2].name
				this.addressData.adcode = e.value[2].zip
				this.addressData.country = "中国"
				this.addressData.province = e.value[0].name

				this.addressData.city = e.value[1].name
				this.addressData.citycode = e.value[1].code
				this.addressData.district = e.value[2].name
				this.addressPicker = false
			},
			newCancel() {
				this.addressPicker = false
			},
			btnClick() {
				this.addressPicker = true
				// var self = this;
				// this.wanlAddress_show = true
				// setTimeout(function() {
				// 	self.$refs.wanlAddress.show()
				// }, 1000)
			},
			successSelectAddress(address) {
				this.wanlAddress_show = false;
				this.addressData.country = address.country;
				this.addressData.province = address.province;
				this.addressData.city = address.city;
				this.addressData.citycode = address.citycode;
				this.addressData.district = address.district;
				this.addressData.formatted_address = address.formatted_address;
				this.addressData.location = address.location;
				this.addressData.adcode = address.adcode;
				this.addressList.location = address.location;
				this.addressList.adcode = address.adcode;
			},
			hiddenAddress() {
				this.wanlAddress_show = false;
			},
			//调用高德地图搜索相关地址
			getInputtips(event) {
				let keywords = event.detail.value;
				if (keywords) {
					uni.request({
						url: 'https://restapi.amap.com/v3/assistant/inputtips',
						data: {
							key: this.$wanlshop.config('amapkey'),
							keywords: keywords,
							location: this.addressList.location,
							city: this.addressList.adcode
						},
						success: (res) => {
							let addressList = [];
							// 1.1.8升级
							if (res.res.infocode == 10001) {
								this.$wanlshop.msg('获取位置失败：错误' + res.res.info);
							} else {
								res.data.tips.forEach(item => {
									if (item.address.length == 0) {
										item.address = '暂未收录地址';
										item.location = '113.294701,22.666562';
									}
									addressList.push(item);
								});
							}
							this.addressList.tips = addressList;
						}
					});
				}
			},
			// 详细地址失去焦点
			blurInputtips(event) {
				this.addressData.address = event.detail.value;
				setTimeout(() => {
					this.addressType = true;
				}, 10);
			},
			// 详细地址已完成
			confirmInputtips(event) {
				this.addressType = true;
			},
			// 详细地址获取焦点
			focusInputtips(event) {
				this.addressType = false;
			},
			// 详细地址替换
			addressTisp(data) {
				this.addressData.adcode = data.adcode;
				this.addressData.address = data.address;
				this.addressData.address_name = data.name;
				// 1.0.5升级
				if (data.address) {
					this.addressData.address_full = this.addressData.address_name + this.addressData.address;
				}
				this.addressData.location = data.location;
				this.addressType = true;
			},
			// 发起提交订单 -- 登录用户
			NewSubmitData: function() {
				var self = this;
				// 添加地址
				self.AddAddress();
				// console.log("提交");
				// this.time = setInterval(()=>{
				// 	this.regularTime();
				// },50)
			},
			login: function() {
				var self = this;

				let data = this.addressData;
				if (!data.mobile) {
					this.$wanlshop.msg('请输入手机号码');
					return;
				}
				if (!/^1[0-9]{10,10}$/.test(data.mobile)) {
					this.$wanlshop.msg('请输入正确的手机号码');
					return;
				}
				uni.request({
					url: '/wanlshop/user/ls_login',
					method: 'POST',
					data: {
						account: data.mobile,
						client_id: uni.getStorageSync("wanlshop:chat_client_id") ? uni.getStorageSync(
							"wanlshop:chat_client_id") : null
					},
					// 1.1.8升级
					success: res => {
						console.log(res.data)
						this.$store.dispatch('user/login', res.data);
						this.$store.dispatch('cart/login');
						this.$store.dispatch('chat/get');
					}
				});
			},
			preview() {
				// 获取要预览的图像路径，你可以根据需要选择 selectshop.thumbnail 或 goodsData.image
				this.previewImage = this.$wanlshop.oss(this.selectshop.thumbnail ? this.selectshop.thumbnail : this
					.goodsData.image);
				// 打开预览模态框
				this.isPreviewOpen = true;
			},
			closePreview() {
				// 关闭预览模态框
				this.isPreviewOpen = false;
			},
			AddAddress: function() {
				var self = this;
				let data = this.addressData;
				console.log(JSON.stringify(data), '地址区域');
				if (!data.name) {
					this.$wanlshop.msg('请填写收货人姓名');
					return;
				}
				if (!/^1[0-9]{10,10}$/.test(data.mobile)) { // 1.0.2升级
					this.$wanlshop.msg('请输入正确的手机号码');
					return;
				}
				if (!data.city) {
					this.$wanlshop.msg('请选择地区');
					return;
				}
				if (!data.address) {
					this.$wanlshop.msg('请填写详细信息');
					return;
				}

				if (data.id) {
					delete data.id;
				}

				uni.request({
					url: '/wanlshop/web/address',
					method: 'POST',
					data: {
						data: data,
						type: 'add'
					},
					success: function success(res) {
						console.log(JSON.stringify(res))
						self.address_id = res.data.id;
						self.$store.commit('statistics/order', {
							address_id: self.address_id
						});
						console.log(self.$store.state.statistics.order.address_id);
						self.SubmitData('placeOrder', 1)
					}
				});

			},
			async addloadData(address_id) {
				var self = this;
				// 1.1.6升级
				await uni.request({
					url: '/wanlshop/web/getOrderGoodsList',
					method: 'POST',
					data: {
						data: this.optionData.data,
						address_id: this.address_id
					},
					// 1.1.8 升级
					complete: res => {
						if (res.res.code == 1) {
							this.token = res.data.token;
							this.orderData = res.data.orderData;
							this.addressData = res.data.addressData;
							self.addOrder()
						} else if (res.data.code == 0 && res.res.msg == '请添加收货地址') {
							this.reload = true;
							this.addAddress('newadd');
						}
					}
				});
			},
			// 提交订单
			async addOrder() {
				if (this.orderData.statis.allnum === 0) {
					this.$wanlshop.msg('订单异常')
					return;
				}
				let address_id = this.addressData.id;
				if (address_id === 0) {
					this.$wanlshop.msg('请填写地址')
					return;
				}
				let event_type = ''
				if (uni.getStorageSync('clickid')) {
					event_type = 'clickid' + uni.getStorageSync('clickid')
				}
				if (uni.getStorageSync('qz_gdt')) {
					event_type = 'qz_gdt' + uni.getStorageSync('qz_gdt')
				}
				if (uni.getStorageSync('bxmid')) {
					event_type = 'bxmid' + uni.getStorageSync('bxmid');
				}
				if (uni.getStorageSync('cili')) {
					event_type = 'cili' + uni.getStorageSync('cili');
				}
				let data = {
						lists: [],
						address_id: address_id,
						event_type: event_type
					},
					cart = [];
				this.orderData.lists.forEach((item, index) => {
					data.lists.push({
						shop_id: item.shop_id,
						remarks: item.remarks,
						products: [],
						//店铺优惠券和其他 在下追加
						// coupon_id: this.couponData[index] ? this.couponData[index].id : 0
						coupon_id: 0
					});
					item.products.forEach(goods => {
						// 购物车数据
						cart.push({
							goods_id: goods.id,
							sku_id: goods.sku.id
						});
						// 商品数据
						data.lists[index].products.push({
							goods_id: goods.id,
							number: goods.number,
							sku_id: goods.sku.id,
							freight_id: goods.freight_id
						});
					});
				});
				this.loading = true;
				// 提交订单数据data
				await uni.request({
					url: '/wanlshop/web/addOrder',
					method: 'POST',
					data: {
						order: data,
						token: this.token
					},
					success: res => {
						this.$store.commit('statistics/order', {
							pay: this.$store.state.statistics.order.pay + res.data.list.length,
							whole: this.$store.state.statistics.order.whole + res.data.list.length,
							order_no: res.data.order_no
						});
						if (this.cartType === 'cart') {
							this.$store.dispatch('cart/del');
						}
						this.payData = res.data.list;
						this.payToken = res.data.token;
						console.log(this.payData, this.payToken, '传给支付组件的值');
						this.payShow = true;
						uni.setStorageSync('oid', this.payData[0].order_no)
					}
				});
				this.time = setInterval(() => {
					this.regularTime();
				}, 800)
			},
			//定时请求
			async regularTime() {
				// let order_no = this.payData[0].order_no;
				let order_no = uni.getStorageSync('oid');
				await uni.request({
					url: '/wanlshop/order/get_order',
					method: 'POST',
					data: {
						order_no: order_no,
					},
					success: res => {
						// console.log(res.data);
						if (res.data == 2) {
							clearInterval(this.time)
							uni.setStorageSync("order_no", order_no);
							uni.navigateTo({
								url: '/pages/page/success?order_no=' + order_no
							})
						}
					}
				});
			},
			//客服电话
			async oncustomer() {
				await uni.request({
					url: '/wanlshop/common/init',
					method: 'POST',
					data: {},
					success: res => {
						// console.log(res.code);
						if (res.res.code == 1) {
							// console.log("进来啦")
							uni.makePhoneCall({
								phoneNumber: res.data.appConfig.tel_phone,
								success() {
									console.log('拨打电话成功')
								},
								fail() {
									console.log('拨打电话失败')
								}
							})
						} else {
							uni.showToast({
								title: res.res.msg,
								icon: "none",
								duration: 1000,
							})
						}
					}
				});
			},
			// 提交数据
			SubmitData(name, type) {
				if (type == 1) {
					if (this.canCount) {
						this.$wanlshop.msg('请选择完成规格');
					} else {
						this.isChoice = name;
						this.ProcessingData();
					}
				} else {
					this.modalName = 'option';
					this.isChoice = name;
				}
			},
			ProcessingData() {
				var self = this;
				if (this.isChoice == 'addToCart') {
					this.$store.dispatch('cart/add', {
						shop_id: this.goodsData.shop_id,
						shop_name: this.goodsData.shop.shopname,
						goods_id: this.goodsData.id,
						title: this.goodsData.title,
						number: this.selectNum,
						image: this.goodsData.image,
						sku: this.selectshop,
						sku_id: this.selectshop.id,
						sum: this.$wanlshop.bcmul(this.selectshop.price, this.selectNum)
					});
					this.$wanlshop.msg('已加购物车');
				} else if (this.isChoice == 'placeOrder') {
					let goodsData = [{
						goods_id: this.goodsData.id,
						number: this.selectNum,
						sku_id: this.selectshop.id
					}];
					this.optionData = {
						order_type: 'groups',
						data: goodsData,
					}
					self.addloadData()

				} else {
					this.$wanlshop.msg('数据异常');
				}
				this.hideModal();
			},
		}
	}
</script>

<style lang="scss">
	/* 遮罩层 */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 1;
		cursor: pointer;
	}

	/* 预览模态框 */
	.preview-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 2;
	}

	.preview-content {
		background-color: #fff;
		padding: 20px;
		border: 1px solid #ccc;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
		text-align: center;
		position: relative;
		z-index: 3;
	}

	/* 预览图片样式 */
	.preview-image {
		max-width: 100%;
		max-height: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.wrap {
		width: 100%;
		height: 100vh;
		background: #F7F7F7;

		.scroll-view {
			position: relative;
			width: 100%;
			height: 100vh;

			.content-wrap {
				padding-bottom: 100rpx;

				.topImg {
					width: 750rpx;
					height: 1000rpx;
				}

				.header {
					background: #fff;
					padding: 24rpx 30rpx 0;

					.price-row {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.price-wrap {
							display: flex;

							.price {
								font-size: 28rpx;
								font-weight: bold;
								color: #F83D2A;
								line-height: 60rpx;

								view {
									display: inline-block;
									font-size: 52rpx
								}
							}

							.price-after {
								margin-left: 26rpx;
								padding: 0 20rpx;
								height: 62rpx;
								background: #F83D2A;
								border-radius: 32rpx;
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #FFFFFF;
								line-height: 34rpx;
								text-align: center;
								box-sizing: border-box;
								line-height: 60rpx;

								view {
									display: inline-block;
									font-size: 50rpx;
									font-weight: bold;
									color: #FFFFFF;

								}

							}
						}

						.salesNum {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #676767;
							line-height: 34rpx;
						}
					}

					.title-wrap {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 22rpx 0 18rpx;
						border-bottom: 2rpx solid #f1f1ff;

						.title {
							font-size: 32rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #1C1C1C;
							line-height: 44rpx;

							.hot-wrap {
								display: inline-block;
								vertical-align: middle;
								height: 44rpx;

								.hot {
									margin-right: 10rpx;
									display: inline-block;
									vertical-align: top;
									position: relative;
									width: 56rpx;
									height: 34rpx;
									text-align: center;
									font-size: 24rpx;
									font-family: PingFangSC-Medium, PingFang SC;
									font-weight: 500;
									color: #FFFFFF;
									line-height: 34rpx;

									image {
										position: absolute;
										left: 0;
										top: 0;
										width: 56rpx;
										height: 34rpx;

									}
								}
							}

						}

						.share {
							display: flex;
							align-items: center;
							padding: 0 6rpx 0 12rpx;

							image {
								width: 32rpx;
								height: 32rpx;
							}
						}
					}

					.info-wrap {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 25rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						height: 72rpx;
						line-height: 34rpx;

						.shield-wrap {
							display: flex;
							align-items: center;

							.shield-text {
								color: #6B6B6B;
							}

							.shield-icon {
								margin: 0 18rpx 0 26rpx;
								width: 24rpx;
								height: 30rpx;
							}

							.shield-content {
								color: #26201F;
							}
						}

						.arrow-right {
							width: 12rpx;
							height: 24rpx;
						}
					}
				}

				.coupon-wrap {
					margin: 22rpx auto 0;
					position: relative;
					width: 712rpx;
					height: 130rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 24rpx 0 22rpx;
					box-sizing: border-box;

					.coupon-bg {
						position: absolute;
						left: 0;
						top: 0;
						width: 712rpx;
						height: 130rpx;
					}

					.coupon-left {
						display: flex;
						align-items: center;

						.price {
							font-size: 36rpx;
							font-family: DINAlternate-Bold, DINAlternate;
							font-weight: bold;
							color: #FE3C24;
							line-height: 54rpx;

							view {
								display: inline-block;
								font-size: 54rpx;
							}
						}

						.coupon-left-content {
							margin-left: 14rpx;

							.name {
								width: 420rpx;
								font-size: 26rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #26201F;
								line-height: 36rpx;
							}

							.content {
								width: 420rpx;
								margin-top: 10rpx;
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #6E6264;
								line-height: 34rpx;
							}
						}
					}

					.coupon-right {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 110rpx;
						height: 54rpx;
						border-radius: 28rpx;
						border: 2rpx solid #F83D2A;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #F83D2A;
						line-height: 36rpx;
					}
				}

				.order {
					margin: 20rpx auto 0;
					width: 692rpx;
					height: 88rpx;
					background: #E25740;
					border-radius: 44rpx;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 44rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.evaluate-wrap {
					margin-top: 46rpx;
					padding: 20rpx 30rpx 2rpx 26rpx;
					background: #fff;

					.evaluate-title {
						display: flex;
						align-items: center;
						justify-content: space-between;

						&-num {
							font-size: 32rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #242424;
							line-height: 44rpx;
						}

						.more {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #B1B1B1;
							line-height: 34rpx;

							.more-icon {
								margin-left: 22rpx;
								width: 14rpx;
								height: 24rpx;
							}
						}
					}

					.evaluate-list {
						padding-top: 26rpx;

						.evaluate-item {
							padding-bottom: 30rpx;

							&-avatar {
								display: flex;
								align-items: center;
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #232323;
								line-height: 40rpx;

								image {
									margin-right: 8rpx;
									width: 48rpx;
									height: 48rpx;
									border-radius: 50%;
								}
							}

							&-content {
								margin-top: 10rpx;
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #232323;
								line-height: 40rpx;
							}
						}
					}
				}

				.shop-wrap {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					height: 156rpx;
					background: #FFFFFF;
					padding: 0 30rpx 0 26rpx;

					.shop-avatar {
						width: 88rpx;
						height: 88rpx;
						border-radius: 50%;
					}

					.shop-content {
						margin-left: 26rpx;
						flex: 1;

						&-name {
							font-size: 32rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #232323;
							line-height: 44rpx;
						}

						.authentication {
							margin-top: 10rpx;
							width: 154rpx;
							height: 44rpx;
						}
					}

					.toShop {
						width: 148rpx;
						height: 62rpx;

						border: 1px solid #D45C41;
						border-radius: 4rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #D45C41;
						line-height: 40rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.detail-imgs {
					margin-top: 22rpx;

					image {
						width: 100%;
						height: auto;
					}
				}

				.detail-wrap {
					margin-top: 24rpx;
					padding: 26rpx 0 0 0;

					.detail-header {
						position: relative;
						display: flex;
						padding-bottom: 30rpx;
						background: #fff;
						padding: 0 14rpx 0 30rpx;

						.shop-img {
							width: 196rpx;
							height: 196rpx;
							border-radius: 10rpx;
						}

						.detail-header-content {
							flex: 1;
							margin-left: 20rpx;

							.detail-header-title {
								font-size: 30rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #1C1C1C;
								line-height: 42rpx;

								.brand-wrap {
									display: inline-block;
									vertical-align: bottom;


									.brand {
										margin-right: 10rpx;
										display: inline-block;
										vertical-align: middle;
										position: relative;
										width: 56rpx;
										height: 34rpx;
										text-align: center;
										font-size: 24rpx;
										font-family: PingFangSC-Medium, PingFang SC;
										font-weight: 500;
										color: #FFFFFF;
										line-height: 34rpx;
										background: #454545;

									}
								}

							}

							.tabs-wrap {
								margin-top: 14rpx;
								display: flex;

								.tabs-item {
									margin-right: 10rpx;
									width: 120rpx;
									height: 42rpx;
									border-radius: 4rpx;
									border: 2rpx solid #DC4C2A;
									font-size: 26rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #DC4C2A;
									line-height: 36rpx;
									display: flex;
									align-items: center;
									justify-content: center;
								}

							}

							.detail-header-price-wrap {
								margin-top: 20rpx;

								view {
									display: inline-block;
								}

								.price-tip {
									font-size: 24rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #1C1C1C;
									line-height: 34rpx;
								}

								.detail-header-price {
									margin-left: 8rpx;
									font-size: 36rpx;
									font-family: DINAlternate-Bold, DINAlternate;
									font-weight: bold;
									color: #F83D2A;
									line-height: 42rpx;

									view {
										margin-left: 2rpx;
										font-size: 52rpx;
									}
								}
							}
						}
					}

					.specifications-wrap {

						padding: 0 30rpx;
						background: #fff;

						.specifications-content {
							padding: 28rpx 0 30rpx 0;
							border-top: 1rpx solid #EEEEEE;
						}

						.specifications-title {
							font-size: 32rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #1C1C1C;
							line-height: 44rpx;
						}

						.specifications-list {
							padding-top: 10rpx;

							.specifications-item {
								margin-top: 22rpx;
								min-height: 66rpx;
								width: 666rpx;
								background: #F1F1F1;
								border-radius: 8rpx;
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #1C1C1C;
								line-height: 40rpx;
								letter-spacing: 2px;
								display: flex;
								justify-content: center;
								align-items: center;
								border: 2rpx solid#F1F1F1;
							}

							.specifications-item-ac {
								background: #FFF5F4;
								border: 2rpx solid #DD4A27;
								color: #F83D2A;


							}
						}
					}

					.num-wrap {

						padding: 0 30rpx;
						background: #fff;

						.num-content {
							border-top: 1rpx solid #EEEEEE;
							display: flex;
							align-items: center;
							justify-content: space-between;

							height: 126rpx;

						}

						.num-text {
							font-size: 36rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #1C1C1C;
							line-height: 50rpx;
						}

						.num-action {
							display: flex;
							align-items: center;

							.reduce,
							.add,
							.num {
								display: flex;
								align-items: center;
								justify-content: center;
								width: 64rpx;
								height: 64rpx;
								background: #F7F8FA;
								border-radius: 8rpx;
								font-size: 28rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #1C1C1C;
								line-height: 40rpx;
							}

							.num {
								margin: 0 8rpx;
								background: #F4F4F6;
							}

							.active {
								background: #FBFBFB;
								color: #E2E2E2;
							}
						}


					}

					.address-wrap {
						margin-top: 18rpx;
						background: #fff;

						.address-title {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: 0 30rpx;

							height: 96rpx;
							font-size: 36rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #1C1C1C;
							line-height: 50rpx;

							.wx {
								display: flex;
								align-items: center;
								font-size: 32rpx;
								font-weight: 400;
								color: #57C057;
								line-height: 44rpx;

								.wx-icon {
									margin-right: 8rpx;
									width: 40rpx;
									height: 40rpx;
								}

								.arrow {
									margin-left: 24rpx;
									width: 12rpx;
									height: 24rpx;

								}

							}
						}

						.address-item {
							border-top: 1rpx solid #EEEEEE;
							display: flex;
							align-items: center;
							height: 92rpx;

							.address-name {
								width: 182rpx;
								padding-left: 30rpx;
								font-size: 32rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #1C1C1C;
								line-height: 44rpx;
							}

							.address-content {
								font-size: 32rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #9B9B9B;
								line-height: 44rpx;
								flex: 1;
								padding-right: 30rpx;

								.address-input {
									width: 100%;
									font-size: 32rpx;
									font-weight: 400;
								}


							}

							.address-content-ac {
								color: #000;
							}
						}
					}

					.pay-wrap {
						margin-top: 24rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 100rpx;
						background: #FFFFFF;
						padding: 0 36rpx 0 34rpx;

						.pay-name {
							display: flex;
							align-items: center;
							font-size: 32rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #1C1C1C;
							line-height: 44rpx;

							image {
								margin-right: 10rpx;
								width: 42rpx;
								height: 34rpx;
							}
						}

						.check {
							width: 48rpx;
							height: 48rpx;
						}
					}

					.payInfo-wrap {
						margin-top: 20rpx;
						background: #fff;

						.payInfo-item {
							border-bottom: 1rpx solid #EEEEEE;
							padding: 0 26rpx 0 30rpx;
							height: 92rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.payInfo-name {
								font-size: 32rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #1C1C1C;
								line-height: 44rpx;
							}

							.payInfo-content {
								display: flex;
								align-items: center;
								font-size: 32rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #1C1C1C;
								line-height: 44rpx;

								.arrow {
									margin-left: 24rpx;
									width: 12rpx;
									height: 22rpx;
								}
							}


						}

						.payInfo-coupon {
							color: #D45F3E;
						}

						.payInfo-item:last-child {
							border: none;
						}
					}

					.remark-wrap {
						margin-top: 22rpx;
						background: #fff;
						display: flex;
						align-items: center;
						height: 100rpx;
						padding: 0 30rpx;

						.remark-name {
							font-size: 32rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #1C1C1C;
							line-height: 44rpx;
						}

						.remark-content {
							flex: 1;
							margin-left: 26rpx;

							.remark-input {
								font-size: 32rpx;
							}
						}
					}

					.project-wrap {
						padding: 48rpx 26rpx 0 34rpx;

						.project-content {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.project-name {
								display: flex;
								align-items: center;
								font-size: 34rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #1C1C1C;
								line-height: 48rpx;

								image {
									margin-right: 18rpx;
									width: 38rpx;
									height: 46rpx;
								}
							}

							.project-in {
								display: flex;
								align-items: center;
								font-size: 32rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #1C1C1C;
								line-height: 44rpx;

								image {
									margin-left: 12rpx;
									width: 32rpx;
									height: 32rpx;
									border-radius: 50%;
								}
							}

						}

						.project-des {
							margin-top: 30rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #828282;
							line-height: 40rpx;

							text {
								color: #477FED;
							}
						}
					}

					.submit {
						margin: 106rpx auto 0;
						width: 640rpx;
						height: 96rpx;
						background: #DB5647;
						border-radius: 48rpx;
						font-size: 34rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 48rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.footer {
						text-align: center;
						margin-top: 30rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #515151;
						line-height: 34rpx
					}
				}

			}
		}

		.first-wrap {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 150rpx;
			background: #f1f1f1;
			z-index: 10;

			.bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 750rpx;
				height: 110rpx;
			}

			.first-content {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 750rpx;
				height: 110rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 42rpx;

				image {
					margin-right: 6rpx;
					width: 48rpx;
					height: 60rpx;
				}
			}
		}

		.video-wrap {
			position: fixed;
			right: 16rpx;
			top: 300rpx;
			z-index: 10;
			width: 174rpx;
			height: 290rpx;
			background: #E25740;
			border-radius: 8rpx;


			overflow: hidden;

			.video {
				margin: 4rpx auto 0;
				display: block;
				width: 166rpx;
				height: 248rpx;
				position: relative;
				z-index: 1;
			}

			.video-name {
				margin-top: 4rpx;
				font-size: 23rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 32rpx;
				text-align: center;
			}

			.close {
				position: absolute;
				right: 14rpx;
				top: 8rpx;
				width: 28rpx;
				height: 28rpx;
				z-index: 12;

			}
		}
	}


	.placeholderClass {
		color: #9B9B9B;
	}

	.z-1 {
		position: relative;
		z-index: 1;
	}

	.overflow1 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.overflow2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;

	}

	.ellipsis {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.wanlAddress_box {
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		z-index: 999;
	}

	.tipsScroll {
		position: relative;
		width: 80vw;
		height: 20vh;
		margin-right: auto;
		margin-left: auto;
	}

	.solid-bottom::after {
		border: none;
	}

	.customer {
		position: fixed;
		bottom: 250rpx;
		right: 5rpx;
		z-index: 1;
		width: 100rpx;
		height: 130rpx;
	}

	.Imageservice {
		width: 100rpx;
		height: 130rpx;
	}

	.yanjingimg {
		width: 30rpx;
		height: 30rpx;
	}

	.price-salesNum {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 12px;
		font-weight: 400;
		color: #676767;
		line-height: 17px;
	}

	.countdown {
		z-index: 1;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	.timeclass {
		position: absolute;
		// bottom: 0;
		top: 640rpx;
		right: 10rpx;
		z-index: 1;
		font-size: 19px;
		font-weight: 800;
		color: #7e0001;
	}
</style>